import React from 'react';
import { View, Text } from '@tarojs/components';
import { gotoPage } from '@/utils/common';
import ZbTitle from '@/comps/common/Title';
import ZbSeparator from '@/comps/common/Separator';

import './index.scss';
import RankApi from '@/api/rank';
import { COMMON_CONFIG, RANK } from '@/app.contants';
import ZbRank from '@/comps/common/Rank';
import { AtLoadMore, AtTabs } from 'taro-ui';

const Schulte = () => {
  const [rankList, setRankList] = React.useState<any[]>([]);
  const [curTab, setCurTab] = React.useState<number>(0);
  const [isLoding, setIsLoading] = React.useState<boolean>(false);
  const schulteChoose = [
    { id: '3', title: '3 * 3' },
    { id: '4', title: '4 * 4' },
    { id: '5', title: '5 * 5' },
    { id: '6', title: '6 * 6' },
    { id: '7', title: '7 * 7' },
    { id: '8', title: '8 * 8' },
    { id: '9', title: '9 * 9' },
    { id: '10', title: '10 * 10' },
  ];

  const onRoute = (it: any) => {
    gotoPage('/pages/schulte/content/index', { level: it.id });
  };

  React.useEffect(() => {
    setIsLoading(true);
    RankApi.list({ type: RANK.SCHULTE, level: curTab + 3 }).then((res) => {
      console.log('res', res);
      if (res.code === COMMON_CONFIG.SUCCESS) {
        setRankList([...res.data.list]);
        setIsLoading(false);
      }
    });
  }, [curTab]);

  const onSwitchTab = (value: number) => {
    console.log(value);
    setCurTab(value);
  };

  return (
    <View className="p-2">
      <ZbTitle icon={<Text className="fa fa-caption pr-10px text-purple-700" />} title="等级选择" className="text-sm" />
      <View className="zb-card grid grid-cols-4 gap-2 p-2">
        {schulteChoose.map((it: any) => (
          <View
            key={it.id}
            className={`flex items-center bg-white shadow-lg rounded-md p-2 justify-items-center `}
            onClick={() => {
              onRoute(it);
            }}
          >
            <View className="text-center w-full text-blue-700">{it.title}</View>
          </View>
        ))}
      </View>
      <ZbSeparator bgColor="#F5F3FF" />
      <ZbTitle icon={<Text className="fa fa-rank pr-10px text-purple-700" />} title="排行榜" className="text-sm" />
      <ZbSeparator bgColor="#F5F3FF" />
      <AtTabs className="bg-purple-700" current={curTab} scroll tabList={schulteChoose} onClick={onSwitchTab} />
      <ZbSeparator />
      {!isLoding && <ZbRank data={rankList} />}
      {isLoding && (
        <View className="bg-white">
          <AtLoadMore status="loading" />
        </View>
      )}
    </View>
  );
};

export default Schulte;
